html,
body {
  height: 100%;
  width: 100%;
}

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
    sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

#root {
  width: 100%;
  height: 100%;
}

.wrap {
  display: flex;
  flex-direction: column;
}

#container {
  min-width: 100%;
  min-height: 400px;
  background-color: #f5f5f5;
  height: 50%;
}

.x6-graph {
  position: relative;
  overflow: hidden;
  outline: none;
  touch-action: none;
}

.x6-graph-background,
.x6-graph-grid,
.x6-graph-svg {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.x6-graph-background-stage,
.x6-graph-grid-stage,
.x6-graph-svg-stage {
  user-select: none;
}

.x6-graph.x6-graph-pannable {
  cursor: grab;
  cursor: -moz-grab;
  cursor: -webkit-grab;
}

.x6-graph.x6-graph-panning {
  cursor: grabbing;
  cursor: -moz-grabbing;
  cursor: -webkit-grabbing;
  user-select: none;
}

.x6-node {
  cursor: move;
  /* stylelint-disable-next-line */
}

.x6-node.x6-node-immovable {
  cursor: default;
}

.x6-node * {
  -webkit-user-drag: none;
}

.x6-node .scalable * {
  vector-effect: non-scaling-stroke;
}

.x6-node [magnet='true'] {
  cursor: crosshair;
  transition: opacity 0.3s;
}

.x6-node [magnet='true']:hover {
  opacity: 0.7;
}

.x6-node foreignObject {
  display: block;
  overflow: visible;
  background-color: transparent;
}

.x6-node foreignObject>body {
  position: static;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: visible;
  background-color: transparent;
}

.x6-edge .source-marker,
.x6-edge .target-marker {
  vector-effect: non-scaling-stroke;
}

.x6-edge .connection {
  stroke-linejoin: round;
  fill: none;
}

.x6-edge .connection-wrap {
  cursor: move;
  opacity: 0;
  fill: none;
  stroke: #000;
  stroke-width: 15;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.x6-edge .connection-wrap:hover {
  opacity: 0.4;
  stroke-opacity: 0.4;
}

.x6-edge .vertices {
  cursor: move;
  opacity: 0;
}

.x6-edge .vertices .vertex {
  fill: #1abc9c;
}

.x6-edge .vertices .vertex :hover {
  fill: #34495e;
  stroke: none;
}

.x6-edge .vertices .vertex-remove {
  cursor: pointer;
  fill: #fff;
}

.x6-edge .vertices .vertex-remove-area {
  cursor: pointer;
  opacity: 0.1;
}

.x6-edge .vertices .vertex-group:hover .vertex-remove-area {
  opacity: 1;
}

.x6-edge .arrowheads {
  cursor: move;
  opacity: 0;
}

.x6-edge .arrowheads .arrowhead {
  fill: #1abc9c;
}

.x6-edge .arrowheads .arrowhead :hover {
  fill: #f39c12;
  stroke: none;
}

.x6-edge .tools {
  cursor: pointer;
  opacity: 0;
}

.x6-edge .tools .tool-options {
  display: none;
}

.x6-edge .tools .tool-remove circle {
  fill: #f00;
}

.x6-edge .tools .tool-remove path {
  fill: #fff;
}

.x6-edge:hover .vertices,
.x6-edge:hover .arrowheads,
.x6-edge:hover .tools {
  opacity: 1;
}

.x6-highlight-opacity {
  opacity: 0.3;
}

.x6-cell-tool-editor {
  position: relative;
  display: inline-block;
  min-height: 1em;
  margin: 0;
  padding: 0;
  line-height: 1;
  white-space: normal;
  text-align: center;
  vertical-align: top;
  overflow-wrap: normal;
  outline: none;
  transform-origin: 0 0;
  -webkit-user-drag: none;
}

.x6-edge-tool-editor {
  border: 1px solid #275fc5;
  border-radius: 2px;
}



.start-node,
.end-node {
  height: 64px;
  width: 64px;
  border-radius: 50%;
  line-height: 64px;
  color: #fff;
  text-align: center;
}

.start-node {
  background-color: #338aff;
}

.end-node {
  background-color: #666;
}

.other-node,
.condition-node {
  width: 224px;
  border-radius: 4px;
  color: #666;
  background: #fff;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.08);
}

.other-node {
  height: 118px;
  padding: 16px;
  display: flex;
  flex-direction: column;
}

.condition-node {
  height: 44px;
  padding: 12px 16px;
}

.ant-popover-inner-content {
  white-space: nowrap;
}